<template>
    <div>

        <!-- 右边 -->
        <div class="right" >
            <div class="rightone">斗牛</div>
            <ul style="padding:0 ;margin:0" class="righttwo">
                <li class="Chlist" v-for="(item,i) in niuniu " :key=item :class="{position:i>=14}">
                    <span class="Chspan" :class="{background:arry.indexOf(i)!=-1}" @click="arrydaxiao(i,$event)">{{item}}</span>
                    <span>{{oddsarr[i+1]}}</span>
                </li>
              
            </ul>
        </div>
        <!-- ///////////////////////浮动按钮 -->
        <!-- <div class="mint-msgbox-wrapper" style="position: absolute; z-index:20001;display:block">
                <div class="mint-msgbox mint-msgboxtwo">
                    <span class="few">共1注</span>
                    <span class="By">200金币</span>
                    <span class="qingkong">清空</span>
                    <span class="Betting"> 投注</span>
                </div> -->
        <!-- <div class="mint-msgbox mint-msgboxone mint-msgboxonetwo" style="display:none">
                    <div class="box">
                        <div class="title">确认投注</div>
                        <div class="btn">
                            <mt-button class="btn1" size="normal" type="danger" @click="purchase()">取消</mt-button>
                            <mt-button size="normal" type="danger" @click="confirm">确认</mt-button>
                        </div>
                    </div>

                </div> -->
        <!-- </div> -->
    </div>
    <!--  -->

</template>
<script>
import { Navbar, TabItem } from "mint-ui";

export default {
    data() {
        return {
            niuniu: [
                "没牛",
                "牛1",
                "牛2",
                "牛3",
                "牛4",
                "牛5",
                "牛6",
                "牛7",
                "牛8",
                "牛9",
                "牛牛",
                "牛大",
                "牛小",
                "牛单",
                "牛双"
            ],
            arry: [],
            name: [],
            oddsarr: [],
            qiushu: {}
        };
    },
    created() {},
    mounted() {},
    methods: {
        arrydaxiao: function(i, e) {
            var value = this.arry.length;
            if (this.arry.indexOf(i) == -1) {
                this.arry.push(i);
                var obj = {
                    name: "斗牛",
                    name1: e.target.innerHTML,
                    peilv: e.target.parentNode.lastChild.innerHTML,
                    id: this.titlename + e.target.innerHTML
                };
                this.name.push(obj);
            } else {
                this.arry.forEach((item, index) => {
                    if (item == i) {
                        this.arry.splice(index, 1);
                        this.name.splice(index, 1);
                    }
                });
            } ///判断是否有粗在
            var diyi = document.querySelector("#d9");
            if (this.arry.length != 0) {
                diyi.style.opacity = "1";
            } else {
                diyi.style.opacity = "0";
            } //  小红点
            if (this.name.length == 0) {
                this.name.push({
                    name: "斗牛",
                    name1: 999
                });
            } else {
                this.name.forEach((item, i) => {
                    if (item.name1 == 999) {
                        this.name.splice(i, 1);
                    }
                });
            }
            this.$emit("length", this.arry.length - value, this.name);
        }
    },
    props: ["enpty", "odds"],
    watch: {
        enpty: function(newvue) {
            if (newvue <= 0) {
                this.arry = [];
                this.name = [];
            }
        },
        odds: function(newvue) {
            this.oddsarr = this.odds;
        }
    }
};
</script>
<style lang="scss" scoped>
// ////
span {
    display: inline-block;
}
.right {
        height: 7.7rem;
    overflow-y: auto;
    .position {
        position: relative;
        left: -1.159rem;
        
    }
    padding-bottom: 1.3rem;
    background: #fff;
    width: 4.6rem;
    float: right;
    height: 100%;
    margin-right: 0.35rem;
    .rightone {
        text-align: center;
        font-size: 0.28rem;
        padding: 0.3rem 0;
    }
    ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .Chlist {
        width: 49%;

        padding: 0.2rem 0;
        padding-left: 0.3rem;
        .Chspan {
            text-align: center;
            font-size: 0.3rem;
            width: 0.78rem;
            height: 0.78rem;
            border-radius: 50%;
            border: 1px solid #d51313;
            color: #d51313;
            margin-right: 0.2rem;
            line-height: 0.7rem;
        }
        .background {
            background: #d51313;
            color: #fff;
        }
        span {
            font-size: 0.24rem;
            color: #4f4f4f;
        }
    }
}

//////////////////浮动按钮/////////////////

// ///////////
</style>   